<template>
    <p>{{ msg }}</p>
    <button @click="msg = 'Hello Vue'">修改数据</button>
</template>
<script setup>
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from 'vue';

const msg = ref('Hello World')

// 在setup()中无法直接访问beforeCreate与created钩子函数
// 因为这两个钩子函数是在setup之后执行的,可以在选项式API中查看

onBeforeMount(() =>{
    console.log("组件挂载之前")
})
onMounted(() =>{
    console.log("组件成功挂载")
})
onBeforeUpdate(() =>{
    console.log("组件修改之前")
})
onUpdated(() => {
    console.log("组件成功修改")
})
</script>